<template>
  <d2-container>
    <template slot="header">
      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-width="auto" label-position="left" :inline="true">

        <el-form-item :label="$t('page.form.serialNumber')" size="mini">
          <el-input placeholder="" v-model="mainQuery.serialNo" @keyup.enter.native="handleSearch" clearable></el-input>
        </el-form-item>

        <el-form-item :label="$t('page.form.accountType')" size="mini">
          <el-select v-model="mainQuery.accountType" :placeholder="$t('page.form.all')" clearable>
            <el-option v-for="item in accountTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('page.form.temporalInterval')" size="mini">
          <el-date-picker size="mini" v-model="dateTimeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" @change="onDateTimePickerChange" :start-placeholder="$t('page.form.startDate')" :end-placeholder="$t('page.form.endTime')">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group> </el-button-group>
        </div>
        <div class="right">
          <!-- <el-button class="filter-item" icon="el-icon-download" size="mini" @click="handleExportExcel">{{ $t('page.form.derive') }}</el-button> -->
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">{{ $t('page.search-box.reset') }}</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch" :loading="mainTable.loading" size="mini">{{ $t('page.search-box.search') }}</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud ref="d2Crud" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :loading="mainTable.loading" @current-change="onMainCurrentChange" @row-dblclick="onMainDoubleClick" @showDetail="showDetail" @selection-change=""></d2-crud>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>

import util from '@/libs/util';
import ApiMain from '@/api/settle.accountAccessHuman';
import dayjs from "dayjs";
import i18nTable from "@/mixins/i18n-table";
export default {
  name: 'settle-accountAccessHuman',
  mixins: [i18nTable
  ],

  data() {
    return {

      accountTypeOptions: [],
      typeOptions: [],

      mainQueryRaw: null,
      mainQuery: {
        mchNo: '',
        // terNo: '',
        serialNo: '',
        accountType: '',
        type: '',
        startTime: '',
        endTime: ''
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: this.$t('page-announcement.d2-crud.empty-data'),
          size: 'mini',
        },
        indexRow: {
          title: this.$t('page.form.serialnumber'),
          width: "80",
          align: 'center'
        },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: "商户号", t: "page-mch-ter.d2-crud.column-mchNo", key: 'mchNo', align: 'center', showOverflowTooltip: true },
          { title: "交易订单号", t: "page.form.transactionOrderNo", key: 'serialNo', align: 'center', width: 180, showOverflowTooltip: true },
          { title: "账户类型", t: "page.form.accountType", key: 'strAccountType', align: 'center', showOverflowTooltip: true, },
          // { title: '出入帐类型', key: 'strType', align: 'center', showOverflowTooltip: true },
          { title: "说明", t: "page.form.explain", key: 'remark', align: 'left', width: 180, showOverflowTooltip: true },

          {
            title: "变动金额", t: "page.form.ChangesAmount", key: 'floatAmount', align: 'right', showOverflowTooltip: true, formatter: (row, col, val, index) => {
              return val.toFixed(2);
            }
          },

          // { title: '余额', key: 'floatAfterTotalAmount', align: 'center', showOverflowTooltip: true },
          { title: "币种", t: "page.form.currency", key: 'currency', align: 'left', showOverflowTooltip: true, width: 80 },
          {
            title: "出入帐时间", t: "page.form.billingOutTime", key: 'createTime', align: 'center', showOverflowTooltip: true, width: 180, formatter: (row, col, val, index) => {
              return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
            }
          },
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
        rowHandle: {
          width: 120,
          text: "操作",
           t: "page.form.operation",
          columnHeader: this.$t('page.form.operation'),
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: "查看详情",
              t: "page.form.viewDetails",
              type: 'default',
              size: 'mini',
              emit: 'showDetail',
            }
          ]
        },
      },

      dateTimeRange: []
    }
  },
  mounted() {

    this.mainQueryRaw = Object.copy(this.mainQuery);

    var re = this.fetchOptions()
      .finally(() => {
        this.resetMainData();
      });

  },

  methods: {

    renderMainData(re) {

      re.list.forEach(item => {

        item.floatAmount = item.amount / 100;
        item.floatBeforeTotalAmount = item.beforeTotalAmount / 100;
        item.floatAfterTotalAmount = item.afterTotalAmount / 100;

        item.strAccountType = util.tool.strFromOptions(item.accountType, this.accountTypeOptions, '-');

      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    onDateTimePickerChange() {
      this.mainQuery.startTime = this.dateTimeRange && this.dateTimeRange.length > 0 ? this.dateTimeRange[0] : ''
      this.mainQuery.endTime = this.dateTimeRange && this.dateTimeRange.length > 0 ? this.dateTimeRange[1] : ''
    },

    showDetail({ index, row }) {
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchOptions() {

      var re = await ApiMain.getAccountTypeOptions();
      this.accountTypeOptions = re;


    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }


      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      // this.handleAction();
    },

    handleAction() {

      if (!!this.mainTable.current) {
      }
    },

    handleExportExcel() {
      this.$refs['common-export'].handleExportExcel(ApiMain, this.mainQuery);
    },

  }
}
</script>

<style>
</style>
